<template>
    <div class="Rigster">
        <a-row>
            <a-col :sm="col.xs" :offset="col.offset">
            <a-divider>用户注册</a-divider>
                <a-form :model="user" :rules="rules" @submit.prevent="register">
                    <a-form-item hasFeedback name="account">
                        <a-input
                        placeholder="请输入电子邮箱"
                        autocomplete="off" 
                        v-model:value="user.account" 
                        type="email" />
                    </a-form-item>
                    <a-form-item name="emailCode">
                        <a-input-search
                            placeholder="请发送并输入邮箱验证码"
                            autocomplete="off"
                            enter-button="发送验证码"
                            @search="sendEmailCode"
                            :disabled="isEmail"
                            v-model:value.trim="user.emailCode"
                        />
                    </a-form-item>
                    <a-form-item name="password">
                        <a-input-password
                            placeholder="请设置登录密码"
                            autocomplete="off"
                            v-model:value.trim="user.password"
                            type="password"
                        />
                    </a-form-item>
                    <a-form-item name="affirmPassword">
                        <a-input-password
                            placeholder="请确认登录密码"
                            autocomplete="off"
                            v-model:value.trim="user.affirmPassword"
                            type="password"
                        />
                    </a-form-item>
                    <a-form-item>
                        <a-input style="width: calc(100% - 100px)"
                            placeholder="请输入图形验证码" 
                            autocomplete="off" 
                            v-model:value.trim="user.code" 
                            type="text" />
                        <a-image @click="refreshImgCode" :src="imgCodeShow" />
                    </a-form-item>
                    <a-form-item style="margin-top: 20px;">
                        <a-button html-type="submit" block size="large" type="primary">注册</a-button>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { email_rigster, get_email_code } from "@/comApi/index";
import { warning,success,rules,_patternRules } from "/src/antd/index.js";
import pub from '/src/lib/index.js'
export default {
    name: "Rigster",
    data() {
        return {
            imgCodeShow: "https://www.semei.net/BookApi/Sms/Sms.php?s=imgCodeShow",
            user: {
                account: "",
                password: "",
                affirmPassword: "",
                emailCode: "",
                code: "",
            },
            col:{
                xs:8,
                offset:8
            },
        }
    },
    methods: {
        refreshImgCode() {
            this.imgCodeShow = `https://www.semei.net/BookApi/Sms/Sms.php?s=imgCodeShow&timestamp=${+new Date()}`;
        },
        sendEmailCode() {
            get_email_code(this.user.account).then((res) => {
            // console.log(res.data.data.success)
            if(res.success === 'ok')
                success('邮箱验证码已经发送成功')
            }).catch((err)=>{
                warning(err)
            })
        },
        register() {
            // console.log(this.user);
            email_rigster(this.user)
            .then((res) => {
                // console.log(res);
                if(res.uid)
                success('用户注册成功')
                this.$router.push('/login')
            }).catch((err)=>{
                // console.log(err);
                warning(err);
                this.refreshImgCode()
            })
        },
    },
    mounted() {
        window.addEventListener('resize',this.$_.debounce(()=>{
            this.col = pub.windowReSize(this.col)
        },50))
        setInterval(() => {
            this.refreshImgCode();
        }, 120000);
    },
    computed: {
        rules: function () {
            return rules(this.affirmPassword)
        },
        _patternRules:function() {
            return _patternRules.isEmail(this.isEmail)
        }
    },
};
</script>

<style lang="scss" scoped>

form {
        margin: 20px auto;
        padding: 20px 40px;
        border: 1px solid #e9e9e9;
        border-radius: 10px;
        text-align: center;
}

</style>
